<template>
    <div class="contentCenter" style="flex:1;">
      <!-- kpi和指标数据 -->
      <div class="kpiData">
        <div class="item1" :class="navstatus==1?'chose1':''" @click="navstatus=1"></div>
        <div class="item2" :class="navstatus==2?'chose2':''" @click="navstatus=2"></div>
      </div>
      <div class="kpicon">
        <div class="conbox" v-show="navstatus==1">
          <div class="item" v-for="item in kpidata" :key="item.name">
            <div class="heng1">{{ item.name }}</div>
            <div class="heng2 setColor">{{ item.num }}%</div>
          </div>
        </div>
        <div class="conbox2" v-show="navstatus==2">
          <div class="item" v-for="item in tizdata" :key="item.name">
            <div class="heng1">{{ item.name }}</div>
            <div class="heng2 setColor">{{ item.num }}</div>
          </div>
        </div>
      </div>
      <!-- 预警信息 -->
       <div class="yujingtitle"></div>
       <div class="yujingbox" :class="item.status==1?'yanzhong':''" v-for="item in yujingdata" :key="item.name">
        <div class="yuleft" >
          <img v-if="item.status==1" src="../../../assets/mahjong/icon38.png" alt="">
          <img v-else src="../../../assets/mahjong/icon37.png" alt="">
          <span>{{item.name}}</span>
        </div>
        <div class="yuright">{{item.time}}</div>
       </div>
       <!-- 下面是地图 -->
        <div class="ditubox">
          <div class="echartbox">
        <e-charts id="mycharts" ref="chart" :option="mapOption" autoresize />
        <div class="bz">
          <div class="bzitem">
            <img src="../../../assets/fengjie/icon31.png" alt="">
            <span>摄像头</span>
          </div>
          <div class="bzitem">
            <img src="../../../assets/fengjie/icon30.png" alt="">
            <span>拾音器</span>
          </div>
        </div>
      </div>
        </div>
    </div>
  </template>
  <script setup lang="ts">
  import { ref, onMounted } from "vue";
  import { getMapJsonFile } from "../../../utils/mapdeal";
  import * as echarts from "echarts";
  import {img1, img2} from "../../../utils/image"

  let navstatus = ref(1)
  let kpidata = ref([
    {name:'民警日常巡查完成率',num:100},
    {name:'投诉处置完成率',num:100},
    {name:'重大活动期间巡查完成率',num:100},
    {name:'经营风险高等级占比率',num:10},
    {name:'经营风险中等级占比率',num:30},
    {name:'重大活动期间投诉处置完成率',num:100},
  ])
  let tizdata = ref([
    {name:'小区麻将馆投诉数量',num:1615},
    {name:'重大活动期间违规营业数量',num:56},
    {name:'日常巡查任务数量',num:1223},
    {name:'小区麻将馆矛盾纠纷数量',num:231}
  ])
  let yujingdata = ref([
    {name:'【编号：00000】超过30天还未处理，请关注',time:'2025-03-12 14:23:22',status:1},
    {name:'【小龙坎街道拾音器检测出高分贝噪声】',time:'2025-03-12 14:23:22',status:2}
  ])

  //以下是地图相关逻辑

  // 获取地图JSON文件\
  const layoutSize = ref("130%");
  const layoutCenterY = ref(53);
  // 纵横比例
  let aspectScale = ref(1.5);
  // 缩放比例
  let zoom = ref(0.8);

  // 地图实例
  const chart = ref(null);
  // 地图配置项
  let mapOption = ref({});

  // 初始化地图
  function initMap(mapName: any, mapData: any) {
    // 地图配置项
    mapOption.value = {
      tooltip: {
        show: true,
        trigger: 'item',// 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
        alwaysShowContent: false,
        seriesIndex: 0,
        borderColor: '#3A96CD',
        borderWidth: 2,
        triggerOn: 'mousemove',
        enterable: false,
        padding: 0,
        textStyle: {
          color: '#DADADA',
          fontSize: '14',
          width: 20,
          height: 30,

          overflow: 'break'
        },
        className: 'mapTooltip',
        formatter(params: any) {
          return `<div style="height: 260px;width: 200px;display: flex; flex-direction: column;align-items: left;box-sizing: border-box;padding:10px;background:#0A3783;">
                <div class="mapTitle"><div class="mapIcon"></div>${params.name}</div>
                <div class="mapSmallTitle" style="margin:10px 0 0 0"><div class="mapOutBox"><div class="mapInlineBox"></div></div> 物联网感知设备 </div>
                <div style="margin:5px 0"><span style="color:#CCCCCC">摄像头：</span> 20个 </div>
                <div style="margin:5px 0"><span style="color:#CCCCCC">拾音器：</span> 12个 </div>
                <div>  </div>
                <div class="mapSmallTitle" style="margin:25px 0 5px 0"><div class="mapOutBox"><div class="mapInlineBox"></div></div> 麻将馆数量 </div>
                <div style="margin:5px 0"> 总数：122个 </div>
                <div style="margin:5px 0"> 无证麻将馆数量：22个 </div>
              </div>`
        },
      },
      visualMap: {
        itemWidth: 30,
        itemHeight: 10,
        padding: 10,
        // 组件上下两端文字
        text: ['治理事件'],
        // 显示标签
        itemStyle: 'roundRect',
        showLabel: true,
        itemGap: 10,
        hoverLink: true,
        borderColor: '#FFFFFF',
        borderWidth: 1,
        textStyle: {
          color: '#FFFFFF',
        },
        inRange: {
          color: 'red',
        },
        outOfRange: {
          color: '#0992f0',
        },
        orient:'vertical',
        right: '4%',
        top: '15%',
        pieces: [
          {
            min: 200,
            max: 100000,
            color: '#703A51',
            label: '200以上',
            symbol: 'roundRect',
          }, {
            min: 100,
            max: 200,
            color: '#79613F',
            label: '100-200',
            symbol: 'roundRect',
          }, {
            min: 0,
            max: 100,
            color: '#167468',
            label: '0-100',
            symbol: 'roundRect',
          }]
      },
      geo: [
        {
          map: mapName,
          zoom: zoom.value,
          aspectScale: aspectScale.value,
          layoutCenter: ["50%", `${layoutCenterY.value}%`],
          layoutSize: layoutSize.value,
          animationDurationUpdate: 0,
          label: {
            show: false,
            color: "#fff",
            fontSize: 14,
            formatter: function (params: any) {
              return params.name.slice(0, 2);
            },
          },
          itemStyle: {
            borderWidth: 1, //设置外层边框
            borderColor: "#94EDFF", //地图交界线颜色
            areaColor: "#1E4CA2", //地图背景色
          },
          // 不显示tooltip
          tooltip: {
            show: false,
          },
          // 去掉鼠标放上的效果
          emphasis: {
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: "transparent",
            },
          },
        },
        {
          type: "map",
          map: mapName,
          aspectScale: aspectScale.value,
          zlevel: -1,
          // aspectScale: 1,
          zoom: zoom.value,
          layoutCenter: ["50%", `${layoutCenterY.value + 2}%`],
          layoutSize: layoutSize.value,
          silent: true,
          //立体效果
          itemStyle: {
            areaColor: 'transparent',
            borderColor: '#7ED8FC', //地图边线颜色
            borderWidth: 3,
            shadowColor: '#315996', //地图边线阴影
            shadowOffsetY: 8,
            shadowBlur: 10
          }
        },
      ],
      series: [
        {
          type: "map",
          map: mapName,
          zoom: zoom.value,
          z: 2,
          aspectScale: aspectScale.value,
          animationDurationUpdate: 0,
          showLegendSymbol: true,
          label: {
            show: true,
            color: "#fff",
            fontSize: "10px",
          },
          itemStyle: {
            areaColor: "transparent",
            borderColor: "#13b4e0",
            borderWidth: 0.2,
          },
          emphasis: {
            itemStyle: {
              show: false,
              color: "#fff",
              areaColor: "#1A307B", //鼠标移到对应区域的颜色
            },
            label: {
              show: true,
              color: "#fff",
            },
          },
          // 取消选中后的高亮状态和文字显示
          select: {
            itemStyle: {
              areaColor: "transparent",
            },
            label: {
              show: true,
              color: "#fff",
            },
          },

          layoutCenter: ["50%", `${layoutCenterY.value}%`],
          layoutSize: layoutSize.value,
          markPoint: {
            data: [
              { coord: [106.365316323621,29.7434544005351], name:'回龙坝镇-摄像头',value:1 }, // 直接使用坐标定位
              { coord: [106.300873604014,29.6902662511455], name:'青木关镇-监听器',value:2 },
              { coord: [106.296113399815, 29.5778529929946], name:'曾家镇-监听器',value:2 },
              { coord: [106.360022221392, 29.600595769506], name:'西永街道-摄像头',value:1 },
              { coord: [106.378027449633, 29.6658548747818], name:'土主镇-摄像头',value:1 },
            ],
            symbolSize: [45,63], // 标记点的大小
            symbol:function(value: number, params: Object){
              return value===1?'image://'+img1:'image://'+img2
            } ,   // 标记的形状，这里是使用'pin'形状
            itemStyle: {
              color: 'red' // 标记的颜色
            },
            label: {
              show: false, // 是否显示标签
              formatter: '{b}' // 标签格式化，{b}代表数据名称
            },
            silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
          },
          data: [
            { name: '回龙坝镇', value: 22 },
            { name: '青木关镇', value: 500},
            { name: '曾家镇', value: 199 },
            { name: '西永街道', value: 184 },
          ]
        },
        {
          type: "lines",
          color: "#fff",
          opacity: 1,
          zlevel: 0,

          label: {
            show: true,
            color: "#fff",
            opacity: 1,
            fontSize: 12,
            backgroundColor: "#0992f0",
            padding: [2, 8],
            borderRadius: 4,
            align: "center",
            height: 20,
            // 垂直居中
            verticalAlign: "middle",
          },
          tooltip: {
            show: true,
          },
          lineStyle: {
            show: true,
            type: [3, 5],
            dashOffset: 5, // 尾迹线条的长度
            width: 2, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0, //尾迹线条曲直度
            color: "#37F6E0", // 飞线颜色转载请附上原文出处链接及本声明。
          },
          data: [],
        },
      ],
    };
    echarts.registerMap(mapName, mapData);
  }
  onMounted(async () => {
    const file = await getMapJsonFile('沙坪坝区');
    initMap("chongqing", file);
  });
  </script>

  <style lang="less" scoped>
  .contentCenter {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding: 0 20px;
  }

  .kpiData {
    width: 100%;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    .item1{
      width: 141px;
      height: 54px;
      cursor: pointer;
      background-image: url("../../../assets/mahjong/icon45.png");
      background-size: 100% 100%;
    }
    .item2{
      width: 188px;
      height: 54px;
      margin-left: 12px;
      background-image: url("../../../assets/mahjong/icon46.png");
      background-size: 100% 100%;
      cursor: pointer;
    }
    .chose1{
      background-image: url("../../../assets/mahjong/icon47.png") !important;
    }
    .chose2{
      background-image: url("../../../assets/mahjong/icon48.png") !important;
    }
  }
  .kpicon{
    width: 100%;
    margin-top: 4px;
    .conbox{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item{
        width: 242px;
        height: 84px;
        background-image: url("../../../assets/mahjong/icon50.png");
        background-size: 100% 100%;
        margin-top: 12px;
        box-sizing: border-box;
        padding: 10px 0px 10px 16px;
        .heng1{
          width: 100%;
          font-size: 17px;
          color: #FFFFFF;
        }
        .heng2{
          width: 100%;
          margin-top: 5px;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
    .conbox2{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 16px;
      .item{
        width: 179px;
        height: 106px;
        background-image: url("../../../assets/mahjong/icon49.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 12px;
        position: relative;
        .heng1{
          width: 100%;
          font-size: 17px;
          color: #FFFFFF;
        }
        .heng2{
          width: 100%;
          font-size: 20px;
          font-weight: bold;
          position: absolute;
          left: 12px;
          bottom: 10px;
        }
      }
    }
  }

.yujingtitle{
  width: 100%;
  height: 46px;
  background-image: url("../../../assets/mahjong/icon34.png");
  background-size: 100% 100%;
  margin-top: 20px;
  margin-bottom: 6px;
}
.yujingbox{
  width: 100%;
  height: 32px;
  margin-top: 8px;
  background-image: url("../../../assets/mahjong/icon35.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .yuleft{
    display: flex;
    align-items: center;
    img{
      width: 38px;
      height: 40px;
    }
    span{
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 12px;
      color: #D9E7FF;
    }
  }
  .yuright{
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
  }
}
.yanzhong{
  background-image: url("../../../assets/mahjong/icon36.png") !important;
}
  .ditubox{
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: calc(100% - 40px);
    transform: translateY(20px);
  }
  .echartbox {
    width: 100%;
    position: relative;
    
    .bz{
      display: flex;
      align-items: center;
      position: absolute;
      right: 0px;
      top: 50px;

      .bzitem{
        display: flex;
        align-items: center;
        margin-left: 26px;
      }
      img{
        width: 24px;
        height: 24px;
      }
      span{
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 14px;
        color: #FFFFFF;
        margin-left: 4px;
      }
    }
  }

  #mycharts {
    width: 750px;
    height: 550px;
  }
  </style>
